<template>
  <div>
    <el-form :model="form" label-width="110px" ref="form" class="form">
      <el-form-item
        v-for="key in keys"
        :label="$t(search_data[key].name)"
        :prop="key"
        :key="key"
      >
        <el-input
          v-if="search_data[key].type == 'text'"
          :title="key"
          v-model="form[key]"
          autocomplete="off"
          clearable
        ></el-input>
        <el-select
          v-if="search_data[key].type == 'select'"
          clearable
          v-model="form[key]"
          @change="(value) => handleChange(value,key)"
          class="size"
        >
          <el-option
            v-for="item in search_data[key].items"
            :key="item.key"
            :value="item.key"
            :label="item.name"
          >
          </el-option>
        </el-select>
        <el-date-picker
          v-if="search_data[key].type == 'date'"
          v-model="form[key]"
          type="daterange"
          align="right"
          unlink-panels
          :range-separator="$t('to')"
          :start-placeholder="$t('start_time')"
          :end-placeholder="$t('end_time')"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
        >
        </el-date-picker>
        <virtual-list
            v-if="search_data[key].type == 'virtual_list'"
            v-model="form[key]"
            class="size"
            :list="search_data[key].items"
            @selectValue="(value) => handleSelect(key, value)"
          ></virtual-list>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button class="kylin-button" @click="handleSearch">{{
        $t("Search")
      }}</el-button>
      <el-button class="kylin-button" @click="handleReset">{{
        $t("Reset")
      }}</el-button>
      <el-button @click="handleCancel">{{ $t("cancel") }}</el-button>
    </div>
  </div>
</template>

<script>
import { noop } from "@/utils";
import virtualList from "@/components/virtualList";
export default {
  components: {
      virtualList
  },
  props: {
    search_data: {
      type: Object,
      required: true,
    },
    display: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form: {},
      pickerOptions: {
        shortcuts: [
          {
            text: this.$t("last_week"),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: this.$t("last_month"),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: this.$t("last_three_month"),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      keys: [],
    };
  },
  mounted() {
    Object.keys(this.search_data).forEach((key) => {
      this.keys.push(key);
      if (this.search_data[key].func) {
        this.search_data[key].func();
      }
    });
    this.setForm();
  },
  methods: {
    noop,
    handleSelect(key, value) {
        this.form[key] = value;
    },
    handleChange(value, key) {
      this.search_data[key].watch
        ? this.search_data[key].watch.call(this, value)
        : this.noop;
    },
    handleCancel() {
      this.$emit("click");
    },
    handleSearch() {
      let search = "";
      Object.keys(this.form).forEach((key) => {
        let rule = "";
        if (
          Object.prototype.toString.call(this.form[key]).slice(8, -1) == "Array"
        ) {
          if (this.form[key][0] && this.form[key][1]) {
            rule = `${key} >= "${this.form[key][0]}" and ${key} <= "${this.form[key][1]}"`;
          }
        } else {
          if (this.form[key] || this.form[key] === false) {
            rule = `${key} ~ "${this.form[key]}"`;
          }
        }
        if (search == "") {
          search = rule;
        } else {
          if (rule) {
            search = search + ` and ${rule}`;
          }
        }
      });
      this.$emit("search", search);
    },
    handleReset() {
      this.$refs.form.resetFields();
    },
    setForm() {
      let search = this.$route.query.search || "";
      let form = {};
      this.keys.forEach((key) => {
        if (this.search_data[key].type === "date") {
          let reg_start = new RegExp(`${key} >= "(.*?)"`);
          let reg_end = new RegExp(`${key} <= "(.*?)"`);
          form[key] = [];
          if (reg_start.test(search)) {
            if (RegExp.$1) {
              form[key].push(RegExp.$1);
            }
          }
          if (reg_end.test(search)) {
            if (RegExp.$1) {
              form[key].push(RegExp.$1);
            }
          }
        } else {
          form[key] = "";
          let reg = new RegExp(`${key} ~ "(.*?)"`);
          if (reg.test(search)) {
            if (RegExp.$1) {
              form[key] = RegExp.$1;
            }
          }
        }
      });
      this.form = form;
      this.$forceUpdate();
    },
  },
  watch: {
    display(value) {
      if (value) {
        this.setForm();
      }
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.form {
  width: 80%;
  margin: 0 auto;
}
.size {
  width: 100%;
}
</style>